<template>
  <div>
    <van-skeleton title :row="15" :loading="isFirst">
    <div class="userInfo" style="border-bottom: none">
      <div class="userLeft">
        <!-- <div class="userRound">彪记肉铺</div> -->
        <img :src="data.data.slogo" alt="" style="width:32vw">
      </div>

      <div class="userRight">
        <div class="user-info">{{data.user.name}}</div>
        <div class="user-info user-phone">{{data.user.account}}</div>
      </div>
    </div>



    <div class="my_divider" style="margin-top: 10px"></div>
    <van-cell title="路由跳转" is-link to="shop/me/store">
      <template #title>
        <span class="weight"> 门店设置 </span>
      </template>
    </van-cell>
    <van-cell title="路由跳转" is-link to="shop/me/account">
      <template #title>
        <span class="weight"> 账号设置 </span>
      </template>
    </van-cell>
    <div class="my_divider"></div>


    <div style="text-align: center;margin-top: 30px;">
      <van-button style="width: 94%;" type="warning" @click="()=>methods.distoryLogin()">解除绑定</van-button>
    </div>

  </van-skeleton>
  </div>
</template>
    <script setup>
import { getSupplierAllStatistics,getSupplierInfo } from "@/api/me";
import myTokens from "@/utils/auth";
import { ref } from "vue";
import { onMounted, reactive } from "vue";
import { useRouter } from "vue-router";

const data = reactive({
  name: "这是我的页面",
  user:{},
  data:{}
});
const isFirst=ref(true);
const router=useRouter();

const methods={
  // 解除绑定
  distoryLogin:()=>{
     myTokens.removeToken();
     router.push("/login")
  },
  //获取供应商信息
  getSupplierInfo:async()=>{
    const res=await getSupplierInfo();
    data.data=res.data;
    isFirst.value=false
  }
}


onMounted(() => {
 const user= JSON.parse(localStorage.getItem("user_supplier"));
  data.user=user;
  methods.getSupplierInfo();
});
</script>

 <style scoped>
.me-bottom {
  padding: 5px;
  box-sizing: border-box;
}
.bound {
  margin-top: 10px;
  margin-bottom: 10px;
}
.custom-title {
  font-weight: bold;
}
.user-info {
  font-weight: bold;
  border-top: 1px solid #eee;
  padding: 10px 0px 10px 10px;
}

.user-phone {
  font-weight: 500 !important;
  border-bottom: 1px solid #eee;
}
.userInfo {
  /* border-bottom: 1px solid #eee; */
  display: flex;
  width: 100%;
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); */
}

.userLeft {
  font-weight: bold;
  flex: 1;
  margin-left: 15px;
  box-sizing: border-box;
  min-height: 110px;
  display: flex;
  align-items: center;
}

.userRight {
  margin-top: 10px;
  width: 60%;
  margin-right: 20px;
  margin-left: 25px;
}

.userRound {
  width: 120px;
  height: 75 px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  line-height: 80px;
  background: rgb(25, 137, 250);
  /* border-radius: 50%; */
  margin: auto;
}
</style>


